<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Crunchy Frog Graphics (canvas) reference</title>
</head>
<body>

<h1>Graphics: canvas summary</h1>
<p>The following table is a summary of available graphics (canvas) commands.</p>
<table summary="Available graphics commands" class='summary'>
<tr><th colspan='2'>Available graphics commands</th></tr>
<tr>
<td><code>point(x, y)</code></td><td>Draws a point in the default line colour.</td>
</tr>
<tr>
<td><code>circle((x, y), r)</code></td><td>Draws a circle of radius <code>r</code> centred on <code>(x, y)</code> in the default line colour.</td>
</tr>
<tr>
<td><code>line((x1, y1), (x2, y2))</code></td><td>Draws a line from point <code>(x1, y1)</code> to point <code>(x2, y2)</code> in the default line colour.</td>
</tr>
<tr>
<td><code>rectangle((top, left), width, height)</code></td><td>Draws a rectangle in the default line colour.</td>
</tr>
<tr>
<td><code>triangle((x1, y1), (x2, y2), (x3, y3))</code></td><td>Draws a triangle joining the three points in the default line colour.</td>
</tr>
<tr>
<td><code>filled_circle((x, y), r)</code></td><td>Draws a filled circle of radius r centred on <code>(x, y)</code> in the default fill colour.</td>
</tr>
<tr>
<td><code>filled_rectangle((top, left), width, height)</code></td><td>Draws a filled rectangle in the default fill colour.</td>
</tr>
<tr>
<td><code>filled_triangle((x1, y1), (x2, y2), (x3, y3))</code></td><td>Draws a filled triangle joining the three points in the default fill colour.</td>
</tr>
<tr>
<td><code>set_line_color(color)</code> <em>or</em><br/>
<code>set_line_colour(colour)</code>
</td><td>Sets the default line colour using a valid value given as a <b>string</b>. The various options are given in the table below.</td>
</tr>
<tr>
<td><code>set_fill_color(color)</code>
<em>or</em><br/>
<code>set_fill_colour(colour)</code>
</td><td>Sets the default fill colour using a valid value given as a <b>string</b>. The various options are given in the table below.</td>
</tr>
</table>

<br />

<table summary="valid colours" class='summary'>
<tr><th colspan='2'>Valid colours</th></tr>
<tr><td><a href="named_colours.html">'named colour'</a></td><td>HTML colour name.</td></tr>
<tr><td>'hex value'</td><td>Colours are defined using a hexadecimal notation for the combination of Red, Green, and Blue colour values (RGB). The lowest value that can be given to one basic colour is 0 (hex #00). The highest value is 255 (hex #FF or #ff; both upper and lower case letters are accepted).  See <a href="named_colours.html">named colours</a> for examples. </td></tr>
<tr><td>'rgb(<em>red, green, blue</em>)'</td><td>Colours are defined using a decimal notation for the combination of Red, Green, and Blue colorr values (RGB). The lowest value that can be given to any one of the basic colour (<em>red</em>, <em>green</em>, or <em>blue</em>) is 0. The highest value is 255. </td></tr>
<tr><td>'rgba(<em>red, green, blue, alpha</em>)'</td><td>Similar to rgb(<em>red</em>, <em>green</em>, or <em>blue</em>), but with the addition of a transparency parameter (<em>alpha</em>). The valid range of values is from 0.0 (fully transparent) to 1.0 (fully opaque). By default, this property is set to 1.0 (fully opaque). </td></tr>
</table>

</body>
</html>

